import React, { useState } from 'react';
import { Box, Typography, Grid, Paper, Checkbox, FormControlLabel, Divider, Button, Dialog, DialogContent, DialogTitle, DialogActions } from '@mui/material';
import { Info as InfoIcon } from '@mui/icons-material';
import apiRequest from '../utils/api';

const ServiceProviderAttributes = () => {
  // 定义服务商属性（分四栏）- 默认只选中维修服务商
  const [attributes, setAttributes] = useState({
    // 基础服务（第一栏）
    communicationProvider: 0,  // 通信连接服务商
    cloudServiceProvider: 0,   // 云服务提供商
    
    // 内容和服务提供商（第二栏）
    navigationProvider: 0,     // 导航
    audioProvider: 0,          // 音频
    voiceAssistantProvider: 0, // 语音助手
    
    // 特定应用功能服务商（第三栏）
    emergencyRescueProvider: 0, // 紧急救援
    maintenanceProvider: 1,     // 维修服务商
    insuranceProvider: 0,       // 保险
    chargingServiceProvider: 0, // 充电服务
    
    // 恶意服务商判别（第四栏）
    maliciousProvider: 0        // 恶意服务商判别
  });
  
  const [tempAttributes, setTempAttributes] = useState({...attributes});
  const [showDialog, setShowDialog] = useState(false);
  const [isSaving, setIsSaving] = useState(false);

  // 获取属性标签
  const getAttributeLabel = (key) => {
    const labels = {
      communicationProvider: '通信连接服务商',
      cloudServiceProvider: '云服务提供商',
      navigationProvider: '导航',
      audioProvider: '音频',
      voiceAssistantProvider: '语音助手',
      emergencyRescueProvider: '紧急救援',
      maintenanceProvider: '维修服务商',
      insuranceProvider: '保险',
      chargingServiceProvider: '充电服务',
      maliciousProvider: '恶意服务商判别'
    };
    return labels[key] || key;
  };

  // 处理属性变更
  const handleAttributeChange = (key) => (event) => {
    setTempAttributes(prev => ({
      ...prev,
      [key]: event.target.checked ? 1 : 0
    }));
  };

  // 保存属性变更
  const handleSave = async () => {
    try {
      setIsSaving(true);
      // 这里可以添加API调用保存属性变更
      await apiRequest.put('/api/service-provider/attributes', attributes);
      setAttributes({...tempAttributes});
      setShowDialog(false);
    } catch (error) {
      console.error('保存属性失败:', error);
      alert('保存失败，请重试');
    } finally {
      setIsSaving(false);
    }
  };

  // 取消变更
  const handleCancel = () => {
    setTempAttributes({...attributes});
    setShowDialog(false);
  };

  // 打开编辑对话框
  const handleEdit = () => {
    setShowDialog(true);
  };

  return (
    <Box sx={{ p: 3 }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
        <Typography variant="h4">服务商属性管理</Typography>
        {/* 移除编辑属性按钮 */}
      </Box>

      <Grid container spacing={3}>
        {/* 第一栏：基础服务 */}
        <Grid item xs={12} md={3}>
          <Paper elevation={2} sx={{ p: 3, height: '100%' }}>
            <Typography variant="h6" gutterBottom sx={{ color: 'primary.main' }}>
              基础服务
            </Typography>
            <Divider sx={{ mb: 2 }} />
            <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <FormControlLabel
                control={
                  <Checkbox
                    checked={attributes.communicationProvider === 1}
                    disabled
                    color="primary"
                  />
                }
                label={getAttributeLabel('communicationProvider')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={attributes.cloudServiceProvider === 1}
                    disabled
                    color="primary"
                  />
                }
                label={getAttributeLabel('cloudServiceProvider')}
              />
            </Box>
          </Paper>
        </Grid>

        {/* 第二栏：内容和服务提供商 */}
        <Grid item xs={12} md={3}>
          <Paper elevation={2} sx={{ p: 3, height: '100%' }}>
            <Typography variant="h6" gutterBottom sx={{ color: 'primary.main' }}>
              内容和服务提供商
            </Typography>
            <Divider sx={{ mb: 2 }} />
            <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <FormControlLabel
                control={
                  <Checkbox
                    checked={attributes.navigationProvider === 1}
                    disabled
                    color="primary"
                  />
                }
                label={getAttributeLabel('navigationProvider')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={attributes.audioProvider === 1}
                    disabled
                    color="primary"
                  />
                }
                label={getAttributeLabel('audioProvider')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={attributes.voiceAssistantProvider === 1}
                    disabled
                    color="primary"
                  />
                }
                label={getAttributeLabel('voiceAssistantProvider')}
              />
            </Box>
          </Paper>
        </Grid>

        {/* 第三栏：特定应用功能服务商 */}
        <Grid item xs={12} md={3}>
          <Paper elevation={2} sx={{ p: 3, height: '100%' }}>
            <Typography variant="h6" gutterBottom sx={{ color: 'primary.main' }}>
              特定应用功能服务商
            </Typography>
            <Divider sx={{ mb: 2 }} />
            <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <FormControlLabel
                control={
                  <Checkbox
                    checked={attributes.emergencyRescueProvider === 1}
                    disabled
                    color="primary"
                  />
                }
                label={getAttributeLabel('emergencyRescueProvider')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={attributes.maintenanceProvider === 1}
                    disabled
                    color="primary"
                  />
                }
                label={getAttributeLabel('maintenanceProvider')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={attributes.insuranceProvider === 1}
                    disabled
                    color="primary"
                  />
                }
                label={getAttributeLabel('insuranceProvider')}
              />
              <FormControlLabel
                control={
                  <Checkbox
                    checked={attributes.chargingServiceProvider === 1}
                    disabled
                    color="primary"
                  />
                }
                label={getAttributeLabel('chargingServiceProvider')}
              />
            </Box>
          </Paper>
        </Grid>

        {/* 第四栏：恶意服务商判别 */}
        <Grid item xs={12} md={3}>
          <Paper elevation={2} sx={{ p: 3, height: '100%' }}>
            <Typography variant="h6" gutterBottom sx={{ color: 'primary.main' }}>
              恶意服务商判别
            </Typography>
            <Divider sx={{ mb: 2 }} />
            <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <FormControlLabel
                control={
                  <Checkbox
                    checked={attributes.maliciousProvider === 1}
                    disabled
                    color={attributes.maliciousProvider === 1 ? 'error' : 'primary'}
                  />
                }
                label={getAttributeLabel('maliciousProvider')}
              />
            </Box>
          </Paper>
        </Grid>
      </Grid>

      {/* 编辑属性对话框 */}
      <Dialog open={showDialog} onClose={handleCancel} maxWidth="md" fullWidth>
        <DialogTitle>编辑服务商属性</DialogTitle>
        <DialogContent>
          <Grid container spacing={3}>
            {/* 第一栏：基础服务 */}
            <Grid item xs={12} md={3}>
              <Typography variant="subtitle1" gutterBottom sx={{ color: 'primary.main' }}>
                基础服务
              </Typography>
              <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={tempAttributes.communicationProvider === 1}
                      onChange={handleAttributeChange('communicationProvider')}
                      color="primary"
                    />
                  }
                  label={getAttributeLabel('communicationProvider')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={tempAttributes.cloudServiceProvider === 1}
                      onChange={handleAttributeChange('cloudServiceProvider')}
                      color="primary"
                    />
                  }
                  label={getAttributeLabel('cloudServiceProvider')}
                />
              </Box>
            </Grid>

            {/* 第二栏：内容和服务提供商 */}
            <Grid item xs={12} md={3}>
              <Typography variant="subtitle1" gutterBottom sx={{ color: 'primary.main' }}>
                内容和服务提供商
              </Typography>
              <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={tempAttributes.navigationProvider === 1}
                      onChange={handleAttributeChange('navigationProvider')}
                      color="primary"
                    />
                  }
                  label={getAttributeLabel('navigationProvider')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={tempAttributes.audioProvider === 1}
                      onChange={handleAttributeChange('audioProvider')}
                      color="primary"
                    />
                  }
                  label={getAttributeLabel('audioProvider')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={tempAttributes.voiceAssistantProvider === 1}
                      onChange={handleAttributeChange('voiceAssistantProvider')}
                      color="primary"
                    />
                  }
                  label={getAttributeLabel('voiceAssistantProvider')}
                />
              </Box>
            </Grid>

            {/* 第三栏：特定应用功能服务商 */}
            <Grid item xs={12} md={3}>
              <Typography variant="subtitle1" gutterBottom sx={{ color: 'primary.main' }}>
                特定应用功能服务商
              </Typography>
              <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={tempAttributes.emergencyRescueProvider === 1}
                      onChange={handleAttributeChange('emergencyRescueProvider')}
                      color="primary"
                    />
                  }
                  label={getAttributeLabel('emergencyRescueProvider')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={tempAttributes.maintenanceProvider === 1}
                      onChange={handleAttributeChange('maintenanceProvider')}
                      color="primary"
                    />
                  }
                  label={getAttributeLabel('maintenanceProvider')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={tempAttributes.insuranceProvider === 1}
                      onChange={handleAttributeChange('insuranceProvider')}
                      color="primary"
                    />
                  }
                  label={getAttributeLabel('insuranceProvider')}
                />
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={tempAttributes.chargingServiceProvider === 1}
                      onChange={handleAttributeChange('chargingServiceProvider')}
                      color="primary"
                    />
                  }
                  label={getAttributeLabel('chargingServiceProvider')}
                />
              </Box>
            </Grid>

            {/* 第四栏：恶意服务商判别 */}
            <Grid item xs={12} md={3}>
              <Typography variant="subtitle1" gutterBottom sx={{ color: 'primary.main' }}>
                恶意服务商判别
              </Typography>
              <Box component="form" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={tempAttributes.maliciousProvider === 1}
                      onChange={handleAttributeChange('maliciousProvider')}
                      color={tempAttributes.maliciousProvider === 1 ? 'error' : 'primary'}
                    />
                  }
                  label={getAttributeLabel('maliciousProvider')}
                />
              </Box>
            </Grid>
          </Grid>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCancel} disabled={isSaving}>取消</Button>
          <Button 
            onClick={handleSave} 
            color="primary" 
            variant="contained" 
            disabled={isSaving}
          >
            {isSaving ? '保存中...' : '保存'}
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

export default ServiceProviderAttributes;